<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers Vehicle Track Playback with Time Below</title>
    <!--<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css">
    <script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>-->
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/4.6.5/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/4.6.5/ol.js"></script>
    <style>
        #map {
            width: 100%;
            height: 90vh;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var trackData = [
        [120.01, 30.02, 45, "2024-07-17 10:00:00"],
        [120.02, 30.03, 90, "2024-07-17 10:01:00"],
        [120.03, 30.04, 135, "2024-07-17 10:02:00"],
        // ... more data points
    ];

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([120.01, 30.02]),
            zoom: 12
        })
    });

    // 车辆图层
    var vehicleLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    map.addLayer(vehicleLayer);

    /**
     * 创建车辆样式
     * @param rotation
     * @param timeText
     * @returns {ol.style.Style}
     */
    function createVehicleStyle(rotation, timeText) {
        return new ol.style.Style({
            image: new ol.style.Icon({
                src: 'images/icon-arrow.png', // 请替换为你的车辆图标路径
                rotation: rotation,
                rotateWithView: true,
                anchor: [0.5, 0.5] // 图标锚点设置在底部中心
            }),
            text: new ol.style.Text({
                text: timeText,
                offsetY: 25, // 时间文本与图标的垂直距离
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({ color: '#000' }),
                stroke: new ol.style.Stroke({ color: '#fff', width: 3 })
            })
        });
    }

    // 轨道样式
    // var trackStyle = ;

    // 车辆特征
    const trackData0 = trackData[0]
    const vehicleFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([trackData0[0], trackData0[1]]))
    });
    vehicleFeature.setStyle(createVehicleStyle(0, trackData0[3]));

    // 航迹坐标
    var trackCoordinates = trackData.map(function(data) {
        return ol.proj.fromLonLat([data[0], data[1]]);
    });

    var trackFeature = new ol.Feature({
        geometry: new ol.geom.LineString(trackCoordinates),
    });
    trackFeature.setStyle(new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#00c4ff',
            width: 3
        })
    }));

    vehicleLayer.getSource().addFeature(trackFeature);
    vehicleLayer.getSource().addFeature(vehicleFeature);

    var currentIndex = 0;
    var interval = 1000; // 动画更新间隔（毫秒）

    function playTrack() {
        if (currentIndex < trackData.length) {
            var data = trackData[currentIndex];
            var lon = data[0];
            var lat = data[1];
            var direction = data[2];
            var time = data[3];
            var rotation = direction * Math.PI / 180;

            vehicleFeature.setGeometry(new ol.geom.Point(ol.proj.fromLonLat([lon, lat])));
            vehicleFeature.setStyle(createVehicleStyle(rotation, "时间: " + time));

            currentIndex++;
            setTimeout(playTrack, interval);
        }
    }

    playTrack();
</script>
</body>
</html>
